<template>
  <div class="z-high-upload flex items-center">
    <template v-if="limit > 1">
      <el-upload action=""
                 :http-request="httpRequest"
                 class="inline-flex"
                 v-for="img in imgs"
                 :disabled="true"
                 :key="img">
        <img :src="img"
             v-if="img"
             alt="">
        <ZIcon icon="el-icon-plus"
               :size="28"
               color="#8c939d"
               v-else />
      </el-upload>
    </template>
    <el-upload action=""
               class="inline-flex"
               :http-request="httpRequest"
               :show-file-list="false"
               v-loading="loading">

      <img :src="imgs"
           v-if="imgs && limit === 1"
           alt="">
      <ZIcon icon="el-icon-plus"
             :size="28"
             color="#8c939d"
             v-else />
    </el-upload>
  </div>
</template>

<script>
import ZIcon from '@/components/storybook/z-icon'
import useBlob from '@/components/storybook/hooks/useBlob'
import { get, isFunction } from 'lodash'

export default {
  name: 'ZHighUpload',
  components: {
    ZIcon
  },
  props: {
    limit: {
      type: Number,
      default: 1
    },

    value: [String, Array],
    type: {
      type: String,
      default: 'snapshot'
    },
    afterUpload: Function,
    fileList: Function
  },
  data () {
    return {
      loading: false,
      currentImg: null
    }
  },

  computed: {
    imgs: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    currentImg (val) {
      if (this.limit > 1) {
        this.imgs = this.imgs ? this.imgs.concat(val) : [val]
      } else {
        this.imgs = val
      }
    },
    isFunction: {
      async handler () {
        if (this.fileList && isFunction(this.fileList)) {
          try {
            this.loading = true
            const fiels = await this.fileList(this.$attrs)

            const fileMaps = fiels.map(i => i.filePath || i.url)

            if (this.limit > 1) {
              this.imgs = fileMaps
            } else {
              this.imgs = fileMaps.join()
            }
          } catch (error) {
          } finally {
            this.loading = false
          }
        }
      },
      immediate: true
    }
  },

  methods: {
    async httpRequest (data) {
      try {
        this.loading = true
        const file = await useBlob(data.file)
        const params = {
          file,
          path: 'apps',
          bucket: 'bots'
        }
        const { postUploadImg } = this.$interface.system
        const { data: response } = await postUploadImg(params)
        if (response.code !== 0) {
          throw get(response, 'msg', '')
        }
        this.currentImg = response.data.src

        if (this.afterUpload && isFunction(this.afterUpload)) {
          this.afterUpload(this.currentImg, this.$attrs)
        }
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.z-high-upload {
  ::v-deep .el-upload {
    border: 1px dashed #c0ccda;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-right: 8px;
  }
  img {
    width: 70px;
    height: 70px;
  }
}
</style>
